<template>
  <view>
    <van-cell  title="科室选择"/>
      
  <van-cell-group inset class="departmentList">
       <van-cell>
         <van-grid >
          <van-grid-item icon="records" 
          :text="department.depName" 
          v-for="(department,index) in departmentList" 
          :key="index"
          @click="setDepartment(department)"
          >
          </van-grid-item>   
       </van-grid>
       </van-cell>
</van-cell-group>


    <!-- <uni-card title="选择科室" :isFull="true">
      <uni-grid :column="3" @change="setDepartment">
        <uni-grid-item
          v-for="(department, index) in departmentList"
          :key="department"
          :index="index"
          class="item"
        >
          <text class="text">{{ department }}</text>
        </uni-grid-item>
      </uni-grid>
    </uni-card> -->
  </view>
</template>

<script>
import { showToast,navTo } from '../../tools/tool';
export default {
  name: "department",
  props: {
    value: String
  },
  mounted() {
    // uni.request({
    //   url: "https://mock.presstime.cn/mock/61acd035ab2fd300162ccc20/info/department",
    //   method: "get",
    //   success: res => {
    //     this.departmentList = res.data.data.departments.map(item => item.name);
    //   },
    //   fail(error) {
    //     console.log(error);
    //   }
    // });

  },
  data() {
    return {
      //TODO: 前后端交互 -- 请求科室 返回科室 更新列表
      departmentList: [
        {
          depName:"消化科",
          depId:1
        },
        {
          depName:"妇产科",
          depId:2
        },
        {
          depName:"内科",
          depId:3
        },
        {
          depName:"外科",
          depId:4
        },
        {
          depName:"口腔科",
          depId:5
        },
      ]

    };
  },

// TODO: 页面需要请求科室,
// 每个科室有对应的科室id 每个科室id
//  有对应的问卷 之后用科室id请求对应问卷
  methods: {
    setDepartment(dep) {
      // console.log(dep)
      let msg = `您选择了${dep.depName}`
      
      let url = `/pages/questionaire/questionaire?depId=${dep.depId}&dep=${dep.depName}`
      showToast(msg)
      navTo(url)
      uni.vibrateShort({
        success: () => { }
      });
    }
  }
}
</script>
<!-- 
<style lang="scss" scoped>
.text {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.item {
}

.card {
}
</style> -->
<style scoped>
  .departmentList { 
    padding:5upx;
    margin-top: 10upx;
  }
</style>
